{extend name="index/index" /}

{block name="navigation"}
<nav class="main-nav">
    <div class="menu-top-menu-container">
        <ul id="menu-top-menu" class="clearfix">
            <li><a href="{:url('index/index/index')}">首页</a></li>
            <li class="current-menu-item"><a href="{:url('index/Recall/index')}">韶华追忆</a></li>
            <li><a href="{:url('index/Mood/index')}">心情随笔</a></li>
            <li><a href="{:url('index/Share/index')}">技术分享</a></li>
            <li><a href="{:url('index/Post/index')}">技术讨论</a></li>
            <!--<li><a href="{:url('index/Archive/index')}">个人归档</a></li>-->
            <li><a href="{:url('/index/Me/index')}">关于我</a></li>
        </ul>
    </div>
</nav>
{/block}


{block name="indexmain"}
<!-- 引用动态框和jquery -->
{css href="/static/index/css/toastr.min.css" }
{js href="/static/index/js/jquery.min.js"}
{js href="/static/index/js/toastr.min.js"}
{css href="/static/index/assets/libs/bootstrap/css/bootstrap.min.css"}
{js href="/static/index/assets/libs/bootstrap/js/bootstrap.min.js"}
<!-- 引用动态框和jquery -->
<style type="text/css">
    .pro a:hover
    {
        text-decoration: none;
        color:#E74851;
        /*background-color: blue;*/
    }
</style>
<!-- Start of Page Container -->
<div class="page-container">
    <div class="container">
        <div class="row">
            <!-- start of page content -->
            <div class="span8 page-content" style="margin-top: 30px;">

                <ul class="breadcrumb">
                    <li>你所在的位置是:<span class="divider">/</span></li>
                    <li><a href="{:url('index/index/index')}">首页 </a> <span class="divider">/</span></li>
                    <li class="active">韶华追忆</li>
                </ul>

                <article class=" type-post format-standard hentry clearfix">
                    <input value="{$article.art_id}" type="hidden" id="art_id">
                    <h1 class="post-title">{$article['artname']}</h1>
                    <div class="post-meta clearfix">
                        <span class="category">{$column.colname}</span>
                        <span class="date">{$article.arttime}</span>
                        <span class="comments">{$count}次评论</span>
                        <span class="like-count" datalove = '{$lists.art_id}'>{$lists.artlove}</span>
                    </div><!-- end of post meta -->


                    <p><img class="alignright size-full wp-image-115 " id="imgs" src="/static/upload/{$article['artpic']}" width="50%" height="50%">{$article['artcontent']}</p>
                </article>

                <div class="like-btn">

                    <form id="like-it-form" action="#" method="post">

                        <input type="hidden" name="post_id" value="99">
                        <input type="hidden" name="action" value="like_it">
                    </form>

                    <span class="tags">
                                                                <strong>Tags:&nbsp;&nbsp;</strong><a href="#" rel="tag">basic</a>, <a href="#" rel="tag">setting</a>, <a href="http://knowledgebase.inspirythemes.com/tag/website/" rel="tag">website</a>
                                                        </span>
                </div>
                <section id="comments">
                    <ol class="commentlist">
                        <li class="comment even thread-even depth-1" id="li-comment-2">
                            <article id="comment-2">
                                <div id="respond" style="margin-top: 10px;">
                                    <form action="#" method="post" id="commentform">
                                        <div>
                                            <!-- 判断是否已经登录 -->
                                            {switch name="session"}
                                            {case value=""}

                                            <a href="{:url('index/Login/login',['id'=>$article['art_id'],'type'=>'article'])}" style="display: block;height: 45px; width:45px;border:1px solid #E74851; text-align: center; line-height:45px;
                                                            color:#E74851;
                                                        " class="img-circle">登录</a>
                                            {/case}
                                            {default /}
                                            <a href="javascript:void(0);" style="position: relative;left:10px;text-decoration:none;">
                                                <a href="#right-panel" id="right-panel-link"><img node-type="user-head" src="/static/userhead/{$userpic == null ? 'default-header.jpg' : $userpic}" width="42" height="42" alt="" class="img-circle"></a>
                                                <span style='position: relative;top:20px;left:5px; background-color: white;  color:#E74851;font-size: 18px;'>用户名:{$session.username}</span>

                                                <div node-type="head-img-ie-mask" class="head-img-ie-mask"></div>
                                            </a>
                                            {/switch}
                                            <!-- 判断结束 -->
                                            <textarea class="span8" name="comment" id="com" cols="58" rows="5" placeholder="既然来了，就说几句吧" style="outline:none;color: #E74851;border:1px solid #E74851" ></textarea>
                                        </div>
                                        <div class="clearfix">
                                            <input class="btn btn-danger" name="comment" type="button" id="addcom"  value="畅言一下吧" class="btn" style="margin-top:10px; float: right;">
                                        </div>
                                    </form>
                                </div>

                                <div >
                                    <a id="comments-title" style="text-align: center; border: 1px solid #E74851; border-bottom: none; width: 70px;  height: 40px; line-height: 40px;font-size: 20px; color:#E74851; border-radius: 10px; display: inline-block;" >评论</a>
                                    <input type='hidden' id="ses" value = '{$session.username}'>
                                    <a style="display: inline-block;float: right; width: 100px;  height: 40px; line-height: 40px;font-size: 15px;color:#E74851;text-decoration:none;"><font style="font-size: 20px;">{$count}</font>&nbsp;&nbsp;条评论</a>
                                </div>
                                <hr style="border:1px solid #E74851;margin: 0px;" class="clearfix"/>
                                <div style="margin-top: 10px;">
                                    <div style="height: 40px; line-height: 40px;">
                                        <a style=" display: inline-block; height: 20px; width:5px;background-color: #E74851;border-radius: 2px;"></a>
                                        <a style="display: inline-block;color:#E74851; font-size: 16px;margin-left: 3px;position: relative;top:-4px;">最新评论</a>
                                    </div>

                                    {volist name="artcom" id="v"}
                                    <div>
                                        <div class="col-md-12 col-xs-12 col-sm-12">
                                            <div class="col-md-1 col-xs-2 col-sm-1">
                                                <img src="/static/userhead/{$v.userpic == null ? 'default-header.jpg' : $v.userpic}" class="img-circle" style="width:100%;height:100%;">
                                            </div>
                                            <div style="float:left;" class="col-md-2 col-xs-1 col-sm-2">{$v.username}</div>
                                            <div class="col-md-7 col-xs-6 col-sm-8" style="text-align: right;">{$v.artcomtime}<font style="color:gray;"></font></div>
                                            <div class="col-md-10 col-xs-11 col-sm-10">

                                                <div class="col-md-12 col-xs-12 col-sm-12">{$v.artcontent}</div>
                                                <div class="col-md-12 col-xs-12 col-sm-12">
                                                    <!--文章追评内容-->

                                                    {if ($v.runcom == null)}
                                                    {else /}
                                                    <div class="col-md-12 " style="border:1px solid #DEE4E9;padding: 10px;margin-top: 15px;">
                                                        {volist name='$v.runcom' id='val' }
                                                        <div class="col-md-12">
                                                            <p style="color:#E74851;font-size:13px;">{$val.runcomuser}</p>
                                                            <p>{$val.runcontent}</p>
                                                        </div>
                                                        {/volist}
                                                    </div>
                                                    {/if}

                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-md-12 pro" style="margin-bottom: 20px; margin-top:30px; border-bottom: 1px dashed gray;padding-bottom: 10px;">
                                            <span class="col-md-9"></span>
                                            <a style="font-size: 13px; padding-right: 15px;" class='refuse'>回复</a>

                                            <span style=" color:gray;padding-right: 0px;" class="glyphicon glyphicon-thumbs-up art-like" datalove = '{$v.artcom_id}'>
                                            </span>
                                            <span class="lovenum" style="padding-right: 10px;">{$v.artcomlove}</span>
                                            <span  style="color:gray; padding-right: 0px;" class="glyphicon glyphicon-thumbs-down art-hit" datahit = '{$v.artcom_id}'></span>
                                            <span class="hitnum" style="padding-right: 10px;">{$v.artbcomhit}</span>

                                            <div class="refusetet" style="height: 180px;display: none;">
                                                <textarea class="span6 runcontent" name="runcontent" cols="50" rows="5" placeholder="追评吧......" style="width:100%;resize: none;outline:none;color: #E74851;border:1px solid #E74851;left:130px;top:10px; border-radius:10px; " ></textarea>
                                                <div class="clearfix">
                                                    <input type="hidden" class="artcom"  value="{$v.artcom_id}" >
                                                    <input class="btn btn-danger addartcom" name="" type="button"  value="追评一下" class="btn" style="margin-right: 10px; margin-top:20px; float: right;">
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    {/volist}
                                </div>
            </div>
            <!-- start of sidebar -->
            <aside class="span4 page-content">

                <section class="widget" style="margin-top: 30px;">
                    <div class="support-widget">
                        <h3 class="title">我是博主啦</h3>
                        <p class="intro">关于我的一些心情和分享的一些小的知识呢，大家也可以积极的讨论...</p>
                    </div>
                </section>



                <section class="widget">
                    <h3 class="title">热门文章</h3>
                    <ul class="articles">
                        {volist name='love'  id='val' }
                        <li class="article-entry standard">
                            <h4><a href="{:url('index/article/index',['id'=>$val['art_id']])}">{$val.artname}</a></h4>
                            <span class="article-meta">{$val.arttime}</span>
                            <span class="like-count"  datalove = '{$val.art_id}'>{$val.artlove}</span>
                        </li>
                        {/volist}

                    </ul>
                </section>

                <section class="widget">
                    <h3 class="title">友情连接</h3>
                    <ul id="recentcomments">
                        {volist name='links' id='val'}
                        <li class="recentcomments"><a href='{$val.linksurl}'>{$val.linksname}</a></li>
                        {/volist}
                    </ul>
                </section>

            </aside>
            <!-- end of sidebar -->
        </div>
    </div>

</div>

<script type="text/javascript">

    $(function(){

        toastr.options = {
            closeButton: true,// 是否显示关闭按钮
            progressBar: true,// 实现显示计时条
            timeOut: "2000",// 自动关闭时间
            positionClass: "toast-top-right"// 提示位置
            // positionClass: "toast-top-full-width"// 提示位置
            // toast-top-full-width 顶端，宽度铺满整个屏幕
            // toast-top-right  顶端右边
        };

        $('#addcom').click(function (){

            if($('#ses').val().length == 0){
                toastr.error('你尚未登录');
            }else{

                var info = 'com'+'='+$('#com').val()
                    +'&'+'art_id'+'='+$('#art_id').val();

                // info 未知
                $.ajax({
                    type: 'post',
                    url: '/index/article/addcoment',
                    //地址 自己定义
                    data: info,
                    dataType : 'json',
                    success : function (data){
                        if (data.status) {
                            toastr.success('评论成功');
                            setTimeout(function (){
                                window.location.reload();
                            },2000);
                        } else {
                            toastr.error('评论失败');
                        }
                    },
                    error : function () {
                        alert('执行失败');

                    }
                });

            }

        });

    });


</script>
<!-- 追评的ajax -->

<script type="text/javascript">

    $(function(){

        toastr.options = {
            closeButton: true,// 是否显示关闭按钮
            progressBar: true,// 实现显示计时条
            timeOut: "2000",// 自动关闭时间
            positionClass: "toast-top-right"// 提示位置
            // positionClass: "toast-top-full-width"// 提示位置
            // toast-top-full-width 顶端，宽度铺满整个屏幕
            // toast-top-right  顶端右边
        };

        $('.addartcom').click(function (){

            if($('#ses').val().length == 0){
                toastr.error('你尚未登录');
            }else{

                var info = 'runcontent'+'='+$(this).parent().siblings('textarea').val()
                    +'&'+'art_id'+'='+$('#art_id').val()
                    +'&'+'artcom_id'+'='+$(this).siblings('.artcom').val();
                // alert(info);
                $.ajax({
                    type: 'post',
                    url: '/index/Article/addartoment',
                    data: info,
                    dataType : 'json',
                    success : function (data){
                        if (data.status) {
                            toastr.success('追评成功');
                            setTimeout(function (){
                                window.location.reload();
                            },2000);
                        } else {
                            toastr.error('追评失败');
                        }
                    },
                    error : function () {
                        alert('执行失败');

                    }
                });

            }

        });

    });


</script>

<!-- 追评的ajax -->

<!-- 点击回复追评 -->
<script type="text/javascript">

    $('.refuse').click(function(){

        // $(this).siblings("div").animate({
        //    height:'toggle'
        // });
        $(this).siblings("div").toggle("slow");

    });

</script>

<script type="text/javascript">

    var img = $('#imgs').attr('src');
    var imgstr = img.substr('15');

    if(imgstr.length==0){
        $('#imgs').attr('style','display: none;');
    }

</script>

<!-- 点赞的ajax -->

<script type="text/javascript">

    $('.like-count').click(function (){
        var info = 'artid' + '=' + $(this).attr('datalove');
        var thisbtn = $(this);
        // alert(info);
        $.ajax({
            type: 'post',
            url: '/index/article/artlove',
            data: info,
            dataType : 'json',
            success : function (data){
                if(data.status){
                    // toastr.success('点赞成功');
                    thisbtn.html(data.love);
                    thisbtn.attr('style','color:blue;');

                    // window.location.reload();

                }else{
                    toastr.error('点赞失败');
                }
            },
            error : function () {
                alert('执行失败');

            }
        });

    });

</script>


<!-- 点赞的ajax -->


<!-- 评论点赞的ajax -->

<script type="text/javascript">

    $('.art-like').click(function (){
        var info = 'comid' + '=' + $(this).attr('datalove');
        var thisbtn = $(this);
        // alert(info);
        $.ajax({
            type: 'post',
            url: '/index/article/comlove',
            data: info,
            dataType : 'json',
            success : function (data){

                if(data.status){
                    // toastr.success('点赞成功');
                    thisbtn.siblings(".lovenum").html(data.love);
                    thisbtn.attr('style','color:red;');

                }else{
                    toastr.error('点赞失败');
                }
            },
            error : function () {
                alert('执行失败');

            }
        });

    });

</script>


<!--评论点赞的ajax -->

<!-- 评论讨厌的ajax -->

<script type="text/javascript">

    $('.art-hit').click(function (){
        var info = 'comid' + '=' + $(this).attr('datahit');
        var thisbtn = $(this);
        // alert(info);
        $.ajax({
            type: 'post',
            url: '/index/article/comhit',
            data: info,
            dataType : 'json',
            success : function (data){

                if(data.status){
                    // toastr.error('讨厌成功');
                    thisbtn.siblings(".hitnum").html(data.hit);
                    thisbtn.attr('style','color:red;');

                    // window.location.reload();

                }else{
                    toastr.error('讨厌失败');
                }
            },
            error : function () {
                alert('执行失败');

            }
        });

    });

</script>


<!--评论讨厌的ajax -->

{/block}
